Разработка сайта для благотворительного фонда "Важные люди"

Всегда на связи

CEO
Илья Лебедкин, СЕО в Adm/Addamant, IT-компания по web и мобильной разработке
СЕО

Илья Лебёдкин

Разработка сайта для благотворительного фонда "Важные люди"

Сайт для благотворительного фонда «Важные люди»

Один из наших самых значимых проектов - сайт для фонда «Важные люди», созданный для помощи детям больным спинальной мышечной атрофией.

WordPress
Bitrix24
figma
nginx
ux/ui design
Разработка web-сайта для благотворительного фонда, кейс от Adm

Фонд «Важные люди» создан в 2020 году для помощи детям больным СМА. Спинальная мышечная атрофия (СМА)― тяжелое генетическое нервно-мышечное заболевание, приводящее к нарастающей мышечной слабости.

Цели и задачи

Создать сайт согласно миссии компании, отражающий суть организации в целом и выполняющий необходимые функции:

Сбор пожертвований. Обеспечить простой и удобный сбор пожертвований от физических и юридических лиц
Помощь фонду. Осветить деятельность фонда, публикуя финансовые отчёты, достижения в помощи и новости из жизни организации

Этапы работ

Действовали мы по классической схеме: прошли шесть этапов на пути к реализации проекта.

01

Аналитика

02

Прототипирование

03

Разработка функционала

04

Формирование брендбука

05

Верстка

06

Запуск

Рабочий процесс

Было подготовлено порядка десяти основных страниц, предусматривающих информирование о деятельности компании, варианты оказания помощи подопечным, обращения попечителей и стандартные контакты/вопросы и прочее.

Процесс разработки дизайна для web-сайта благотворительного фонда, кейс от Adm

Рабочий процесс команды дизайна MAX в Figma

Айдентика

Отдельное внимание было выделено айдентике. Логотип и все фирменные элементы создавались вокруг фразы «помогать другим — важно».

Соответственно, подопечные, кому фонд собирает средства для реализации конкретных шагов к выздоровлению или обеспечению необходимым — и есть ВАЖНЫЕ люди. Те, кому помогли, кому выразили поддержку и сочувствие.

Айдентика в дизайне во время разработки web-сайта для благотворительного фонда, кейс от Adm

Элементы айдентики вокруг формулировки "Важные люди"

Анимации

Хотелось выразить эмоции любви и сострадания подопечным в анимированных элементах, словно нарисованных маркером.

Так, например, главная кнопка с текстом «Помочь» выделяется сердцем, которое увеличивается в такт появления тени у кнопки = в дуэте это выглядит словно сердцебиение!

Анимации и дизайн кнопки CTA во время разработки web-сайта для благотворительного фонда, кейс от Adm

Кнопка CTA

При скролле страниц мы наблюдаем линию, созданную округлой кистью, которая также рисует сердце на фоне.

Анимации и элементы дизайна во время разработки web-сайта для благотворительного фонда, кейс от Adm

Элементы дизайна

Интеграция

Ниже мы видим один из самых интересных элементов с точки зрения разработки — кастомизированная форма для сбора пожертвований на основе leyka.org

В прошлой версии сайта было установлено готовое решение, сейчас же это форма с индивидуальным дизайном.

Дизайн формы для сбора пожертвований до редизайна и доработки web-сайта для благотворительного фонда, кейс от Adm

Раньше фонд использовал готовое решение на базе leyka.org. Функционал модуля был ограничен, а дизай оставлял желать лучшего.

Редизайн формы для сбора пожертвований во время доработки web-сайта для благотворительного фонда, кейс от Adm

У новой формы появился расширенный функционал и приятный дизайн, увеличивающий конверсию.

В центре внимания анимированное сердце и отклик кнопок, меняющий цвет фона. Будто чье-то сердце бьется чаще, пока пользователь совершает действия на пути своего доброго дела!

Редизайн формы для сбора пожертвований во время доработки web-сайта для благотворительного фонда, кейс от Adm

Форма представлена в разных цветах

Интеграция с платёжными сервисами не только в их прямом назначении, но и отображение онлайн тех поступлений, что значатся последними за сутки. Это вызывает доверие посетителей сайта и побуждает к действию!

Интеграция с платежными системами и отображение на web-сайте благотворительного фонда, кейс от Adm

Поступающие переводы отображаются в реальном времени

Также интеграция с leyka.org позволяет онлайн отображать динамику по сборам. Сколько нужно всего и какая сумма собрана на текущий момент.

Интеграция с сервисом отображения динамики сборов на web-сайте благотворительного фонда, кейс от Adm

Динамика сборов

Управление сайтом

Предусмотрели функционирование сайта таким образом, чтобы была возможность оперативно вносить изменения без привлечения технических специалистов

Также подключили сервис Битрикс24, что позволило всем действующим лицам в организации получать необходимые данные

Подключение сервиса Битрикс24 на web-сайт благотворительного фонда, кейс от Adm

На сайте существует раздел, где заполнив поля с валидацией данных, есть возможность отправить на рассмотрение ребёнка, которому требуется помощь. Данные отправляются как во внутреннюю систему администрирования сайта, так и в Б24.

Форма заявки для web-сайта благотворительного фонда и настройка с CRM, кейс от Adm

Функционал заявки

Ежемесячно сайт посещают около 10 000 пользователей. Сайт выдерживает нагрузку с успехом — однозначно, это стабильная платформа оказания помощи нуждающимся.

Разработка высоконагруженного web-сайта для благотворительного фонда, кейс от Adm

Статистика посещений сайта

Результат

В рамках проекта мы провели серьёзную работу в визуальной части платформы. Это, в первую очередь, адаптивный дизайн и интерфейс, интуитивно понятная структура.

Рады были реализовать проект для социально значимой некоммерческой организации и быть причастными к такому большому делу!
Заместитель
генерального директора

Качанова Кристина

Смотреть видео

Цитата клиента

«... в процессе работы мне понравилось как выставлена работа: и грамотное прототипирование, это генерация идей, решение каких-то наших проблем и наших запросов, это работа команды и отклик на любые возникающие вопросы. Это соблюдение сроков. У нас были достаточно короткие сроки и ребята прекрасно справились с этой задачей...»

Будем рады обратной связи.

19

Расскажем больше внутрянки в нашем канале

Вероника Зуй , Бренд-менеджер

Перейти
Сайты и сервисы
Дизайн
Мобильные приложения
Bitrix24
  • Сайты и сервисы
  • Дизайн
  • Мобильные приложения
  • Bitrix24
Запустить заявку
Старт
Всего 1 шаг
до решения
Вашей задачи
или просто
напишите
нам в Telegram

Больше кейсов